<template>

    <el-container>
        <el-header style="display: flex;justify-content: space-between;align-items: center;">
            <h3>首页</h3>
            <div class="time">2024-02-01</div>
        </el-header>
        <el-main>
            <div style="display: flex;">
                <div class="peoplebox">
                    <div id="peopleChart" style="height: 400px; width: 550px;">

                    </div>
                    <!-- 进度条 -->
                    <div class="demo-progress">
                        <h3>每天使用量</h3>
                        <el-progress :text-inside="true" :stroke-width="26" :percentage="70" />
                        <el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success" />
                        <el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success" />
                        <el-progress :text-inside="true" :stroke-width="24" :percentage="10" status="success" />
                        <el-progress :text-inside="true" :stroke-width="24" :percentage="40" status="success" />
                        <el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning" />
                        <el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception" />
                    </div>
                </div>
                <div class="main_right">
                    <div id="right-top" style="height: 300px; width: 200px;"></div>

                    <div class="right-bottom" style="height: 140px;
    width: 200px;  display: flex; justify-content: center; align-items: center;
    margin-top: 15px;">
                        <el-statistic title="Feedback number" :value="562">
                            <template #suffix>
                                <el-icon style="vertical-align: -0.125em">
                                    <ChatLineRound />
                                </el-icon>
                            </template>
                        </el-statistic>
                    </div>
                </div>
            </div>
            <div style="display: flex ;margin-top: 30px;">
                <div id="leftzhu" style="height: 260px; width: 800px;"></div>
                <div id="rightzhu" style="     height: 230px;
    width: 250px;
    margin-left: 35px;
    padding: 15px;">

                </div>
            </div>

            <div id="main" style="height:1000px; width: 100%; margin-top: 30px;"></div>
        </el-main>
    </el-container>



</template>

<script lang="ts" setup>
import * as echarts from 'echarts';
import { onMounted } from 'vue';
import 'echarts-gl';
import { ChatLineRound } from '@element-plus/icons-vue'
// const daytime=ref(Date.now())

// 在这里添加 declare var require: any
// declare var require: any;

// const OOT_PATH:string = 'https://echarts.apache.org/examples';
// let hd:{pict1:string,pict2:string}={
//     pict1:OOT_PATH+'/data-gl/asset/earth.jpg',
//     pict2:OOT_PATH+'/data-gl/asset/starfield.jpg'
// }
let hd: { pict1: string, pict2: string } = {
    pict1: new URL('../../assets/photos/earth.jpg', import.meta.url).href,
    pict2: new URL('../../assets/photos/starfield.jpg', import.meta.url).href,
}
console.log(hd.pict1)
let myChart;
let option;
// 人数折线图
let peoplechart;
let peoplechart_option;
// 右侧饼状图
let bingchart;
let bingchart_option;


let leftzhuchart;
let leftzhuchart_option;


let rightchart;
let rightchart_option;



onMounted(() => {
    //地球
    myChart = echarts.init(document.getElementById("main"));
    option = {
        backgroundColor: '#000',
        globe: {
            baseTexture: hd.pict1,
            shading: 'lambert',
            environment: hd.pict2,
            atmosphere: {
                show: true
            },
            light: {
                ambient: {
                    intensity: 0.1
                },
                main: {
                    intensity: 1.5
                }
            }
        },
        series: []
    };
    // 人数折线图
    peoplechart = echarts.init(document.getElementById('peopleChart'));
    peoplechart_option = {
        title: {
            text: '用户人数'
        },
        tooltip: {
            trigger: 'axis'
        },
        // legend: {
        //     data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        // },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: 'Email',
                type: 'line',
                stack: 'Total',
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: 'Union Ads',
                type: 'line',
                stack: 'Total',
                data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
                name: 'Video Ads',
                type: 'line',
                stack: 'Total',
                data: [150, 232, 201, 154, 190, 330, 410]
            },
            {
                name: 'Direct',
                type: 'line',
                stack: 'Total',
                data: [320, 332, 301, 334, 390, 330, 320]
            },
            {
                name: 'Search Engine',
                type: 'line',
                stack: 'Total',
                data: [820, 932, 901, 934, 1290, 1330, 1320]
            }
        ]
    }
    //饼状图
    bingchart = echarts.init(document.getElementById('right-top'));
    bingchart_option = {

        title: {
            text: '占比',
            // subtext: 'Fake Data',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        // legend: {
        //     orient: 'vertical',
        //     left: 'left'
        // },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: [
                    { value: 1048, name: 'Search Engine' },
                    { value: 735, name: 'Direct' },
                    { value: 580, name: 'Email' },
                    { value: 484, name: 'Union Ads' },
                    { value: 300, name: 'Video Ads' }
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]

    }

    // 柱状图

    leftzhuchart = echarts.init(document.getElementById('leftzhu'));
    leftzhuchart_option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar'
            }
        ]
    }
    // 柱状图

    rightchart = echarts.init(document.getElementById('rightzhu'));
    rightchart_option = {
        xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [
        120,
        {
          value: 200,
          itemStyle: {
            color: '#a90000'
          }
        },
        150,
        80,
        70,
        110,
        130
      ],
      type: 'bar'
    }
  ]
    }




    option && myChart.setOption(option);
    peoplechart_option && peoplechart.setOption(peoplechart_option);
    bingchart_option && bingchart.setOption(bingchart_option);
    leftzhuchart_option && leftzhuchart.setOption(leftzhuchart_option);
    rightchart_option && rightchart.setOption(rightchart_option);
})

</script>

<style scoped>
.peoplebox {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 850px;
    height: 420px;
    background-color: rgba(227, 227, 202, 0.4);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 0.8px solid rgba(255, 255, 255, 0.18);
    box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
    -webkit-box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
    border-radius: 13px;
    -webkit-border-radius: 13px;
    padding: 20px;
}

.demo-progress {
    width: 200px;
    height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.main_right {
    width: 250px;
    height: 400px;
    margin-left: 35px;
}

#right-top,
#leftzhu,
#rightzhu,
.right-bottom {

    background-color: rgba(227, 227, 202, 0.4);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 0.8px solid rgba(255, 255, 255, 0.18);
    box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
    -webkit-box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
    border-radius: 13px;
    -webkit-border-radius: 13px;
}
</style>